<template>
    <div>
        <el-dialog :visible.sync="questionVisible" title="选择问题" width="980px" class="selectQuestion" :before-close="cancel" append-to-body>
            <div style="display: flex;height: 100%">
                <knowledgeTree @getClassId="getClassId" type="class" ref="knowledgeTree" :canEdit="false"></knowledgeTree>
                <div style="width: calc(100% - 250px)">
                    <el-radio-group v-model="questionRadio" class="questionRadio">
                        <div class="questionItem" v-for="(item,i) in questionList" :key="i">
                            <el-radio :label="item.id"><span></span></el-radio>
                            <p>{{item.question}}</p>
                        </div>
                    </el-radio-group>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNo"
                                   :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="sizes, total,prev, pager, next"
                                   :total="total" background>
                    </el-pagination>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel" size="small" type="text">取消</el-button>
                <el-button @click="submit" type="primary" size="small">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import knowledgeTree from "@/components/knowledgeTree";
import { getQueList } from "@/api/knowledge.js";
export default {
    name: "selectQuestion",
    props: {
        questionVisible: Boolean,
        questionId: String
    },
    inject: {
        sourceId: {
            from: "sourceId",
            default: () => {
                return "";
            }
        }
    },
    data() {
        return {
            questionList: [],
            total: 0,
            pageNo: 1,
            pageSize: 10,
            questionRadio: "",
            classId: "0",
        }
    },
    methods: {
        getQueList() {
            var param = {
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                classId: this.classId != "0" ? this.classId : "",
                sourceId: this.sourceIds
            };
            getQueList(param).then((resp) => {
                if (resp.status == 0) {
                    this.total = resp.data.total;
                    this.questionList = resp.data.questionList || [];
                }
            });
        },
        handleCurrentChange(val) {
            this.pageNo = val;
            this.getQueList();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getQueList();
        },
        submit() {
            if (!this.questionRadio) {
                return this.$antMessage.warning("请选择问题");
            }
            var index = this.questionList.findIndex(item => item.id == this.questionRadio);
            var question = this.questionList[index];
            this.$emit("getRecData", { questionId: question.id, question: question.question });
            this.cancel();
        },
        cancel() {
            this.questionRadio = "";
            this.$emit("update:questionVisible", false);
        },
        getClassId(classId) {
            this.classId = classId;
            this.pageNo = 1;
            this.getQueList();
        }
    },
    created() {
        this.getQueList();
    },
    computed: {
        sourceIds() {
            return this.sourceId ? this.sourceId() : "";
        }
    },
    watch: {
        questionId(val) {
            this.questionRadio = val;
        }
    },
    components: {
        knowledgeTree
    }
}
</script>

<style lang="scss">
.selectQuestion {
    .el-dialog {
        height: 680px;
        .el-dialog__body {
            position: relative;
            overflow: hidden;
            .el-pagination {
                position: absolute;
                bottom: 0;
                right: 10px;
            }
        }
    }
    .questionRadio {
        width: 100%;
        border: 1px solid #dae1e9;
        border-radius: 6px;
        height: 470px;
        overflow: auto;
    }
    .knowledgeTree {
        width: 220px;
        height: 470px;
        margin-right: 20px;
        .el-tree {
            padding: 10px 0 10px 10px;
            background: #f5f7fa;
            border-radius: 6px;
        }
    }
    .questionItem {
        display: flex;
        align-items: center;
        padding-left: 15px;
        height: 48px;
        font-size: 14px;
        color: #676e75;
        border-bottom: 1px solid #dae1e9;
        .el-radio {
            margin-right: 0;
        }
        > p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 40px;
        }
    }
    .el-pagination {
        .el-input__inner {
            border: 1px solid #dae1e9 !important;
        }
    }
}
</style>